.grid-options {
  @extend .card;
  padding-top: 12px;
  padding-bottom: 24px;
  max-width: 480px;
  > h2 {
    margin-top: 0;
    font-size: 1.3 * ($font-size-lg);
    line-height: 1.2;
    color: $gray-dark;  
  }
  > h3 {
    font-size: $font-size-lg;
    line-height: 1.2;
    margin-top: $spacer-y / 2;
    color: $gray-dark;
  }
}

.options-list {
  @include make-row();
  list-style-type: none;
  padding-left: 0;
  li {
    @include make-col-ready($grid-gutter-width); //  use @include make-col-ready(); for alpha 4 and up, see https://github.com/twbs/bootstrap/pull/20597
    @include make-col(6);
    @include media-breakpoint-down(sm) {
       @include make-col(4);
    }
    /* @include media-breakpoint-only(md) {
       @include make-col(12);
    } */
    a {
       @extend .btn;
       @extend .btn-sm;
       padding-left: 0;
       padding-right: 0;
       color: $gray;
       &:before {
         @extend .#{$fa-css-prefix};
         @extend .#{$fa-css-prefix}-square-o:before; //content: $fa-var-square-o;
         @extend .#{$fa-css-prefix}-fw;
       }
       @include hover-focus-active {
         color: $link-color;
         &:before {
           content: $fa-var-check-square-o;
         }
       }    
     }
   }
}

.choose-clearance {
  @extend .m-x-auto; 
  display: block;
  width: 92.5%;
  padding-top: $spacer-y * 2;
  padding-bottom: $spacer-y;
  font-size: 90%;
  white-space: normal;
  position: relative;
  h3 {
    font-weight: normal;
    color: #fff;
    padding-top: $spacer-y / 2;
    margin: $spacer / 3;
  }
  p {
    margin: $spacer / 3 $spacer * 2;
    line-height: 1.2;
  }
  .icon {
    position: absolute;
    top: 0;
    right: 2px;
  }
}
